<template>
  <div>
    <div class="summary">
      <div ref="dom" class="pieCharts"></div>
      <div class="statistics">
        <div class="statistics-item">
          <span>用例总数：</span>
          <span>{{ total }}</span>
        </div>
        <div class="statistics-item">
          <span>通过数量：</span>
          <span>{{ success }}</span>
        </div>
        <div class="statistics-item">
          <span>失败数量：</span>
          <span>{{ fail }}</span>
        </div>
        <div class="statistics-item">
          <span>通过比例：</span>
          <span>{{ success_pct }} %</span>
        </div>
        <div class="statistics-item">
          <span>执行总耗时：</span>
          <span>{{ total_elapsed_ms }} </span>
        </div>
      </div>
    </div>
    <div class="graphicSymbol">
      <RadioGroup v-model="status" @on-change="getTestcaseReport" size="small">
        <Radio label="PASS">
          <Icon size="24" :color="statusColor['PASS']" type="ios-leaf" />
          <span>通过</span>
        </Radio>
        <Radio label="FAIL">
          <Icon size="24" :color="statusColor['FAIL']" type="ios-leaf" />
          <span>失败</span>
        </Radio>
        <Radio label="DEFAULT">
          <Icon size="24" :color="statusColor['DEFAULT']" type="ios-leaf" />
          <span>全部</span>
        </Radio>
      </RadioGroup>
    </div>
    <div ref="table">
      <Table
        :columns="columns"
        :data="data"
        size="small"
        border
        :tooltip-max-width="500"
      >
        <template slot-scope="{ row }" slot="project|api">
          <Tooltip placement="bottom" transfer :max-width="500">
            <div slot="content" style="white-space: normal">
              项目：{{ row.project_name }}
              <br />
              接口：{{ row.api_name }}
            </div>
            {{ row.project_name }} - {{ row.api_name }}
          </Tooltip>
        </template>
        <template slot-scope="{ row }" slot="status">
          <Icon size="24" :color="statusColor[row.status]" type="ios-leaf" />
        </template>
      </Table>
    </div>
  </div>
</template>
<script>
import { getTestcaseReport } from "@/api/HttpAutoTestService/reports";
import echarts from "echarts";
export default {
  name: "testcase-report",
  props: {
    version: {
      type: String,
      default: "",
    },
  },
  watch: {
    version(val) {
      if (val) {
        getTestcaseReport({ version: val }).then((res) => {
          let data = res.data;
          this.total = data.total;
          this.success = data.success;
          this.fail = data.fail;
          this.success_pct = data.success_pct;
          this.total_elapsed_ms = data.total_elapsed_ms;
          this.data = data.results;
          this.drawCharts();
        });
      }
    },
  },
  data() {
    return {
      status: "DEFAULT",
      statusColor: {
        PASS: "#19be6b",
        FAIL: "#ed4014",
        DEFAULT: "#2db7f5",
      },
      total: 0,
      success: 0,
      fail: 0,
      success_pct: 0.0,
      total_elapsed_ms: "00:00:00.000",
      columns: [
        {
          type: "index",
          width: 60,
          align: "center",
        },
        {
          title: "用例名称",
          key: "testcase_name",
          width: 350,
          tooltip: true,
          align: "center",
        },
        {
          title: "项目|接口",
          slot: "project|api",
          width: 350,
          ellipsis: true,
          align: "center",
        },
        {
          title: "请求URL",
          key: "url",
          width: 350,
          tooltip: true,
          align: "center",
        },
        {
          title: "请求方法",
          key: "method",
          align: "center",
          width: 100,
        },
        {
          title: "Headers参数",
          key: "headers",
          width: 350,
          tooltip: true,
          align: "center",
        },
        {
          title: "Body参数",
          key: "request_data",
          width: 350,
          tooltip: true,
          align: "center",
        },
        {
          title: "响应状态码",
          key: "actual_status_code",
          width: 120,
          align: "center",
        },
        {
          title: "响应时长(ms)",
          key: "elapsed_ms",
          width: 120,
          align: "center",
        },
        {
          title: "响应结果",
          key: "actual_response_data",
          minWidth: 350,
          align: "center",
          tooltip: true,
        },
        {
          title: "输出变量结果",
          key: "output_result",
          minWidth: 350,
          align: "center",
          tooltip: true,
        },
        {
          title: "失败原因",
          key: "failure_reason",
          minWidth: 350,
          align: "center",
          tooltip: true,
        },
        {
          title: "用例ID",
          key: "testcase_id",
          align: "center",
          width: 270,
          tooltip: true,
        },
        {
          title: "测试结果",
          slot: "status",
          align: "center",
          width: 85,
          fixed: "right",
        },
      ],
      data: [],
    };
  },
  methods: {
    drawCharts() {
      this.$nextTick(() => {
        let option = {
          tooltip: {
            trigger: "item",
            position: ["90%", "80%"],
            formatter: "{a} <br/>{b}: {c} ({d}%)",
          },
          series: [
            {
              name: "测试报告",
              type: "pie",
              radius: ["50%", "80%"],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: "center",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: "16",
                  fontWeight: "normal",
                },
              },
              labelLine: {
                show: false,
              },
              data: [
                {
                  value: this.success,
                  name: "测试通过",
                  itemStyle: { color: "#19be6b" },
                },
                {
                  value: this.fail,
                  name: "测试失败",
                  itemStyle: { color: "#ed4014" },
                },
              ],
            },
          ],
        };
        echarts.init(this.$refs.dom, "light").setOption(option);
      });
    },
    getTestcaseReport() {
      // 根据状态过滤用例结果
      let data = { version: this.version };
      if (this.status !== "DEFAULT") {
        data["status"] = this.status;
      }
      getTestcaseReport(data).then((res) => {
        let data = res.data;
        this.data = data.results;
      });
    },
  },
};
</script>
<style scoped>
.summary {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.pieCharts {
  height: 200px;
  width: 200px;
}
.statistics {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.statistics-item {
  font-weight: bold;
}
.graphicSymbol {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 5px;
}
</style>